import React, { Component, Fragment } from 'react'
import avatorURL from '../../../../../../images/profile photo.jpg'
// import { Icon } from 'antd';

// const IconFont = Icon.createFromIconfontCN({
//     scriptUrl: 'http://at.alicdn.com/t/font_1616893_r7jbd9ireyn.js',
// });

export default class ChildrenComment extends Component {
    handleComment = (id, nickname) => {
        this.props.handleComment(id, nickname)
    }

    judgeShow = () => {
        let { item } = this.props;
        let { isShowChildrenComments } = this.props;
        let createTime = new Date(Number(item.createTime));
        let year = createTime.getFullYear();
        let month = createTime.getMonth() + 1;
        let date = createTime.getDate();
        let hour = createTime.getHours();
        let minute = createTime.getMinutes();
        let temp;
        if (item.parentID !== null) {
            temp = <div style={{
                display: 'flex',
                justifyContent: 'flex-start'
            }}>
                <div style={{
                    color: 'blue',
                    paddingLeft: 5,
                    paddingRight: 5
                }}>回夝</div>
                <div>{item.parentNickName}</div>
            </div>
        }

        if (!isShowChildrenComments) {
            return <div></div>
        }

        return (
            <Fragment>
                <img src={avatorURL} alt="头僝" style={{
                    borderRadius: '50%',
                    marginRight: 10,
                    width: 40,
                    height: 40,
                }} />
                <div>
                    <div style={{
                        display: 'flex',
                        justifyContent: 'space-between',
                        paddingRight: 20,
                        width: 730
                    }}>
                        <div style={{
                            color: '#bbb',
                            display: 'flex',
                            justifyContent: 'flex-start'
                        }}>
                            <div>{item.commentNickname}</div>
                            {temp}
                        </div>
                        <div style={{
                            color: '#bbb',
                        }}>{`${year}-${month}-${date} ${hour}:${minute}`}</div>
                    </div>
                    <div style={{
                        paddingRight: 20
                    }}>{item.content}</div>
                    <span
                        className="anticon-portal anticonhuifu"
                        style={{
                            paddingTop: 10,
                            color: '#ccc'
                        }}
                        onClick={() => this.handleComment(item.userid, item.commentNickname)}
                    ></span>
                </div>
            </Fragment>
        )
    }

    render() {
        return (
            <div style={{
                backgroundColor: '#eee',
                paddingBottom: (this.props.isShowChildrenComments ? 20 : 0),
                paddingLeft: 15,
                paddingTop: (this.props.isShowChildrenComments ? 10 : 0),
                display: 'flex',
                justifyContent: 'flex-start',
                transitionDuration: '.3s',
                height: (this.props.isShowChildrenComments ? 100 : 0)
            }}>
                {this.judgeShow()}
            </div>
        )
    }
}
